<template>
    <div class="head" :class="{bacol}">
      <span class="iconfont list">&#xe60a;</span>
      <div class="divp">
        <i class="jd1"></i>
        <span class="iconfont search">&#xe600;</span>
        <input class="divpi" type="text" placeholder="茵曼女装 全场3件7折 2件8折">
      </div>
      <span class="login">登录</span>
    </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      bacol: false
    }
  },
  methods: {
    handleScroll () {
      var aa = document.documentElement.scrollTop
      if (aa > 60) {
        this.bacol = true
      } else {
        this.bacol = false
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
  .bacol
    background-color #e43130
  .head
    height 44px
    line-height 44px
    position fixed
    top 0
    z-index 100
    width 100%
    .list
      color #fff
      width 40px
      display inline-block
      height 44px
      text-align center
      font-size 24px
      line-height 44px
    .divp
      display inline-block
      background-color #fff
      border-radius 15px
      width 72%
      vertical-align sub
      height 30px
      .divpi
        vertical-align super
        margin-left 30px
        width 80%
      ::-webkit-input-placeholder
        font-size .2rem
      .search
        color #ccc
        position absolute
        top 2px
        margin-left 8px
    .login
      font-size .28rem
      color #fff
      line-height 44px
      display inline-block
      width 40px
      position absolute
      right 0
</style>
